{% extends 'layout.html' %}
{% block title %}订单管理{% endblock %}
{% block content %}
    <div class="container">
    <div style="margin-bottom: 10px">
        <input id="btnAdd" type="button" value="新建订单" class="btn btn-success">
{#        <input type="button" value="新建订单" class="btn btn-primary" data-toggle="modal" data-target="#myModal">#}
        </div>
    <div>
            <div class="panel panel-default">
                <div class="panel-heading"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 订单列表
                </div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>订单编号</th>
                            <th>名称</th>
                            <th>价格</th>
                            <th>状态</th>
                            <th>管理员</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for item in page_queryset %}
                            <tr uid="{{ item.id }}">
                                <th scope="row">{{ item.id }}</th>
                                <td>{{ item.oid }}</td>
                                <td>{{ item.title }}</td>
                                <td>{{ item.price }}</td>
                                <td>{{ item.get_status_display }}</td>
                                <td>{{ item.admin.username }}</td>
                                <td><input type="button" uid="{{ item.id }}" class="btn btn-primary btn-xs btn-edit" value="编辑">
                                    <input uid="{{ item.id }}" type="button" class="btn btn-danger btn-xs btn-delete" value="删除">
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="clearfix">
            <ul class="pagination" style="float: left">
                {{ page_string }}
            </ul>
        </div>
    </div>

    <!-- 新建/编辑 订单对话框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
        <form id="formAdd"><!--关掉浏览器做的校验-->
 <div class="clearfix">
  {% for field in form %}
      <div class="col-xs-6">
      <div class="form-group" style="position: relative ;margin-bottom: 20px">
    <label>{{ field.label }}</label>
          {{ field }}
          <span class="error_msg" style="color: red ; position: absolute;"></span>
  <!--  <input type="text" class="form-control" name="user" placeholder="请输入用户姓名" style="margin-bottom: 10px">-->
  </div>
  </div>
  {% endfor %}
 <div class="col-xs-12">
 </div>
 </div>
 </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" id="btnSave" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
    <!-- 删除订单对话框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="alert alert-danger alert-dismissible fade in" role="alert">
      <h4>是否确定删除</h4>
      <p style="margin: 10px 0px">删除后，所有关联数据均会被永久删除！</p>
      <p style="text-align: right">
        <button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
      </p>
    </div>
  </div>
</div>
{% endblock %}
{% block js %}
    <script type="text/javascript">
    var DELETE_ID;
    var EDIT_ID;
    $(function (){
        bindBtnAddEvent();
        bindBtnSaveEvent();
        bindBtnDeleteEvent();
        bindBtnConfirmDeleteEvent();
        bindBtnEditEvent();
    })
    function bindBtnAddEvent(){
        $('#btnAdd').click(function (){
            //将正在编辑的ID设置为空
            EDIT_ID = undefined;
            //清空对话框中的数据
            $("#formAdd")[0].reset()

            $("#myModalLabel").text("新建")
             //清除错误信息
            $(".error_msg").empty();
            {#点击新建按钮，显示对话框#}
            $('#myModal').modal('show');
        })
    }
    function bindBtnSaveEvent(){
        $('#btnSave').click(function (){
            //清除错误信息
            $(".error_msg").empty();
            {#alert("保存");#}
            if (EDIT_ID){
                //编辑
                doEdit();
            }else{
               doAdd();

            }
        })
    }
    function doEdit(){
        //向后台发送请求（Ajax添加请求）
            $.ajax({
                url:"/order/edit/"+"?uid="+EDIT_ID,//--> /order/edit/?uid=EDIT_ID
                type:"post",
                data:$("#formAdd").serialize(),
                dataType:"JSON",
                success:function (res){
                    if(res.status){
                        {#alert("创建成功");#}
                        //清空表单  $("#formAdd")是JQuery对象------》$("#formAdd")[0]是DOM对象
                        $("#formAdd")[0].reset();
                        //关闭对话框
                        $('#myModal').modal('hide');
                        //刷新页面
                        location.reload()
                    }else{
                        if(res.tips){
                            alert(res.tips);
                        }else {
                        //把错误信息显示在对话框中
                        $.each(res.error, function (name, errorList){
                            $("#id_"+name).next().text(errorList);
                        })
                    }}
                    {#console.log(res);#}
                }
            })
    }
    function doAdd(){
        //向后台发送请求（Ajax添加请求）
            $.ajax({
                url:"/order/add/",
                type:"post",
                data:$("#formAdd").serialize(),
                dataType:"JSON",
                success:function (res){
                    if(res.status){
                        {#alert("创建成功");#}
                        //清空表单  $("#formAdd")是JQuery对象------》$("#formAdd")[0]是DOM对象
                        $("#formAdd")[0].reset();
                        //关闭对话框
                        $('#myModal').modal('hide');
                        //刷新页面
                        location.reload()
                    }else{
                        //把错误信息显示在对话框中
                        $.each(res.error, function (name, errorList){
                            $("#id_"+name).next().text(errorList);
                        })
                    }
                    console.log(res);
                }
            })
    }
    function bindBtnDeleteEvent(){
         $(".btn-delete").click(function (){
             {#alert("点击了删除");#}
             //显示删除对话框
             $("#deleteModal").modal('show');
             //获取当前行的id并赋值给全局变量
             DELETE_ID = $(this).attr("uid");
         })
     }
    function bindBtnConfirmDeleteEvent(){
        $("#btnConfirmDelete").click(function (){
            //点击确认删除按钮，将全局变量中设置的那个要删除的ID发送到后台
            $.ajax({
                url:"/order/delete/",
                type: "get",
                data:{
                    uid:DELETE_ID
                },
                dataType: "JSON",
                success: function (res){
                    if(res.status){
                        {#alert("删除成功");#}
                        //隐藏删除框
                        $("#deleteModal").modal("hide");
                        //在页面上将当前数据的一行删除掉（js）
                        {#$("tr[uid='"+DELETE_ID+"']").remove();#}
                        //要删除的ID置空
                        DELETE_ID = null;
                        //删除成功后页面刷新
                        location.reload();
                    }else{
                        alert(res.error);
                    }
                }
            })
        })
     }
    function bindBtnEditEvent(){
        $(".btn-edit").click(function (){
             $(".error_msg").empty();
            //清空对话框中的数据
            $("#formAdd")[0].reset()
            {#alert("点击了编辑！");#}
            var uid = $(this).attr("uid")
            EDIT_ID =uid;
            //修改对话框的标题
            $("#myModalLabel").text("编辑")
            //点击编辑，显示对话框
             $('#myModal').modal('show');
            //发送Ajax去后端获取当前行的相关数据
            $.ajax({
                url:"/order/detail/",
                type:"get",
                data:{
                    uid:uid
                },
                dataType:"JSON",
                success(res){
                    if (res.status){
                        {#console.log(res.data)#}
                        //将数据赋值到对话框的标签中
                        $.each(res.data,function (name,value){
                            $("#id_"+name).val(value);
                        })
                    }else {
                        console.log(res.error);
                    }
                }

            })
            //在对话框中默认看到
        })
    }

    </script>
{% endblock %}